<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="home/css/style.css" >
<link rel="stylesheet" href="home/css/jquery.bxslider.css" >
<link rel="stylesheet" href="home/css/reset.css">
<link rel="stylesheet" href="home/css/product.css">

<style type="text/css">
    * {
    margin:0;
    padding:0;
    list-style:none;
}
.wrap {
    height:220px;
    width:330px;
    margin:5px auto;
    position:relative;
    overflow:hidden;
}
.wrap ul {
    position:absolute;
}
.wrap ul li {
    height:220px;
}
.wrap ol {
    position:absolute;
    right:5px;
    bottom:10px;
}
.wrap ol li {
    height:20px;
    width:20px;
    background:#ddd;
    border:1px solid #969591;
    border-radius:50%;
    margin-left:5px;
    color:#959490;
    float:left;
    text-align:center;
    cursor:pointer;
}
.wrap ol .on {
    background:#8F9E9E;
    color:#fff;
}
</style>

</head>

<body>


@include('home.header')


	
<!--轮换图调用-->

   
    <!--新闻动态-->
    <div class="top_xinwen">
    	<div class="xw_xinwen">
        	<div class="xw_xw1">
            	<ul>
                	<li class="xw_Name">新闻动态<span class="xw_gd">Learn More >></span></li>   	
                  
                @foreach ($data as $key =>$val)
                <li class="xw_liebiao" onmouseover="javascript:blurtitle(this)" id="title{{$key}}"><a href="/newscenter/news_info?id={{$val->id}}">{{Str::limit($val->title,36,'...')}} </a><span>{{date('Y-m-d',$val ->time)}}</span></li>
                <!-- {{Str::limit($val->title,36,'...')}} -->
                                <li class="xw_images" id="content{{$key}}" 
                                @if ($key == 0)
                                style="display:block"
                                @else 
                                style="display:none"
                                @endif>
                                        <span class="xw_span"><img src={{$val->thumb}} /></span>
                                        <span class="xw_neirong">
                                            <div class="xw_no1">
                                                <ul>
                                                    <li class="cw_abcName"><a href="/newscenter/news_info?id={{$val->id}}">{{$val ->description}}</a></li>
                                                    <li class="cw_abcnoct">

                                                        </li>
                                                    <li class="cw_gengduo"><a href="/newscenter/news_info?id={{$val->id}}">Learn More >></a></li>  
                                                </ul>
                                            </div>       	
                                        </span>
                                </li>

                    @endforeach 
                  
                  
                </ul>
            </div>
        </div>
		<div class="xw_chanpin">
        	<div class="xw_xw1">
            	<ul>
                	<li class="xw_Name">产品中心<span class="xw_gd">Learn More >></span></li>

            <div class="wrap" id="wrap">
                <ul id="pic">
                    @foreach($pic as $p)
                    <li><a target="_blank" href="/product_info?id={{$p->id}}"><img height="220px" width="220px" src="{{$p ->thumb}}"  alt=""></a></li>
                     @endforeach
                </ul>

                    <ol id="list">
                        <li class="on">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ol>
                </div>
           


                         
                </ul>
            </div>
        </div>
        <div class="xw_lianxi">
        	<img width="100%" src="/home/images/4556.gif" />
        </div>
		<div class="xw_lxTel">
        	<div class="xw_lxName">
            		<ul>
                    	<li class="lx_nameA">咨询热线</li>
                        <li class="lx_nameB">
                        	<font color="#333333" size="2">热线 ：</font><font  size="2">0377-61588899</font><p>
                            <font color="#333333" size="2">传真 ：</font><font  size="2">0377-63890035</font><p>
                            <font color="#333333" size="2">邮件 ：</font><font  size="2">nydst@163.com</font><p>
                        </li>
                    </ul>
            </div>
        </div>
    </div>
    

 @include('home.footer')   
    
</div>




<script type="text/javascript" src="home/js/jquery-1.8.3.min.js"></script>
<SCRIPT src="home/js/jquery.bxslider.min.js" type=text/javascript></SCRIPT>

<script type="text/javascript" src="home/js/jquery.bxslider.min.js"></script>
<script language="JavaScript" type="text/JavaScript">





 function toggle(targetid){
 	document.getElementById("div"+targetid).style.display="block";        
 	for(var i =1;i<=4;i++){
		if(targetid != i){
			document.getElementById("div"+i).style.display="none";
		}
	}
 }
 </script>	
<script type="text/javascript">
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

function jsddm_open()
{	jsddm_canceltimer();
	jsddm_close();
	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
	
	}

function jsddm_close()
{	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}

function jsddm_timer()
{	closetimer = window.setTimeout(jsddm_close, timeout);
   
}

function jsddm_canceltimer()
{	if(closetimer)
	{	window.clearTimeout(closetimer);
		closetimer = null;}}

$(document).ready(function()
{	$('#jsddm > li').bind('mouseover', jsddm_open);
	$('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
  </script>
<script type="text/javascript"> 
	function blurtitle(v){ //鼠标滑过显示内容方法
		for(var i=0;i<5;i++){ //以3个标题举例
			if("title"+i == v.id){ //当前循环的i如果是正确的标题，将内容的display设为block，即显示
				document.getElementById("content"+i).style.display = "block";
			}else{ //当前循环的i是其他标题，将内容设为none，即隐藏
				document.getElementById("content"+i).style.display = "none"; 
			}
		}
	}
	
	
</script>

<script type="text/javascript">
$('.bxslider1').bxSlider({
  auto:true,
  infiniteLoop: true,
  hideControlOnEnd: true
});
</script>


<script type="text/javascript">
    window.onload = function() {
     var wrap = document.getElementById('wrap'),
         pic = document.getElementById('pic'),
         list = document.getElementById('list').getElementsByTagName('li'),
         index = 0,
         timer = null;

     // 若果有在等待的定时器，则清掉
     if (timer) {
         clearInterval(timer);
         timer = null;
     }

     // 自动切换
     timer = setInterval(autoPlay, 2000);

     // 定义并调用自动播放函数
     function autoPlay() {
         index++;
         if (index >= list.length) {
             index = 0;
         }
         changeImg(index);
     }

     // 定义图片切换函数
     function changeImg(curIndex) {
         for (var j = 0; j < list.length; j++) {
             list[j].className = "";
         }
         // 改变当前显示索引
         list[curIndex].className = "on";
         pic.style.marginTop = -220 * curIndex + "px";
         index = curIndex;
     }

     // 鼠标划过整个容器时停止自动播放
     wrap.onmouseover = function() {
         clearInterval(timer);
     }

     // 鼠标离开整个容器时继续播放至下一张
     wrap.onmouseout = function() {
         timer = setInterval(autoPlay, 2000);
     }

     // 遍历所有数字导航实现划过切换至对应的图片
     for (var i = 0; i < list.length; i++) {
         list[i].id = i;
         list[i].onmouseover = function() {
             clearInterval(timer);
             changeImg(this.id);
         }
     }
 }
</script>

</body>
</html>
  